<template>
	<view class="page-all">
		<Header title="开始检查" bgColor="#fff" @leftClick="back"></Header>
		<view class="list-container">
			<view class="item">
				<view class="top-label" @click="retract(0)">
					<view>基本信息</view>
					<view v-if="showBasicInformation[0].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[0].show">
					<!-- 学校信息 -->
					<schoolInformation></schoolInformation>
					<!-- 食堂信息 -->
					<canteenInformation></canteenInformation>
					<!-- 从业人员 -->
					<employedInformation></employedInformation>
					<!-- 库存食材 -->
					<foodInformation></foodInformation>
				</view>
			</view>
			<!-- 检查信息 -->
			<view class="item">
				<view class="top-label" @click="retract(1)">
					<view>检查信息</view>
					<view v-if="showBasicInformation[1].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[1].show">
					<view class="row">
						<view class="title">检查食堂:</view>
						<view class="con">{{ '检查食堂' }}</view>
					</view>
					<view class="row">
						<view class="title">指标名称:</view>
						<view class="con">{{ '指标名称' }}</view>
					</view>
					<view class="row">
						<view class="title">检查日期:</view>
						<view class="con">{{ '检查日期' }}</view>
					</view>
					<view class="row row-check">
						<view class="title">检查人:</view>
						<view class="" @click="toSelectExaminer" style="display: flex; color: #3d3d3d">
							<view>默认检查人</view>
							<view v-for="(item, index) in list" :key="index" v-if="selsetValue">
								<view style="margin-right: 10rpx">{{ item }}</view>
							</view>
							<span v-if="selsetValue && selsetValue.length > 3">{{ selsetValue.length }}等人</span>
							<uv-icon name="arrow-right" size="20rpx" color="#000000"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查内容 -->
			<view class="item">
				<view class="top-label" @click="retract(2)">
					<view>检查内容</view>
					<view v-if="showBasicInformation[2].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[2].show">
					<view v-for="(item, index) in checkList" :key="index">
						<view class="row">
							<view class="title1">{{ index + 1 }}</view>
							<view class="label-index">{{ item.name }}</view>
							<view class="annotation" v-if="isActive !== index" @click="annotationShow(index)">检查批注</view>
							<view v-if="isActive === index" class="annotation-right">
								<view>保存</view>
								<view>取消</view>
							</view>
						</view>
						<view v-if="isActive === index" class="textAreaBox">
							<uv-textarea v-model="valueContent" count placeholder="请输入内容"></uv-textarea>
							<view class="fontCount">
								<view><image :src="imgMinioPath + '/law/yuyin.png'"></image></view>
								<view></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查照片 -->
			<view class="item">
				<view class="top-label">
					<view class="check-all">
						<view class="requireStar" style="width: 25%">检查照片</view>
						<view class="check-all-ri-label">至少上传3张图片</view>
					</view>
					<view class="zi-label">{{ fileListCheck.length }}/30</view>
				</view>
				<view class="info" style="display: flex">
					<view class="file-all">
						<view v-for="(image, index) in fileListCheck" :key="index"  style="position: relative;">
							<image :src="image.url" class="file-img"  @click="onPreviewImage(image, index)"></image>
							<image src="../../../static/image/deletImg.png" class="delet-img" @click="delect()"></image>
						</view>
						<view @click="up" v-if="fileListCheck && fileListCheck.length < 30">
							<image src="../../../static/image/upload.png" class="file-img"></image>
						</view>
					</view>

				</view>
			</view>
			<!-- 检查记录单 -->
			<view class="item">
				<view class="top-label">
					<view>检查记录单</view>
					<view class="zi-label">{{ fileList.length }}/3</view>
				</view>
				<view class="info" style="display: flex">
					<view class="file-all">
						<view v-for="(image, index) in fileList" :key="index" style="position: relative;">
							<image :src="image.url" class="file-img" @click="onPreviewImage(image, index)"></image>
							<image src="../../../static/image/deletImg.png" class="delet-img" @click="delect()"></image>
						</view>
						<view @click="up" v-if="fileList && fileList.length < 3">
							<image src="../../../static/image/upload.png" class="file-img"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查情况补充 -->
			<view class="item">
				<view class="top-label">
					<view>检查情况补充</view>
				</view>
				<view class="info textAreaBox">
					<uv-textarea v-model="value" count placeholder="请输入内容"></uv-textarea>
					<view class="fontCount" @click="showSpeech">
						<view><image :src="imgMinioPath + '/law/yuyin.png'"></image></view>
						<view></view>
					</view>
				</view>
			</view>
			<!-- 是否需要整改 -->
			<view class="item">
				<view class="top-label">
					<view class="requireStarBottom">是否需要整改</view>
					<view class="rectification">
						<view v-for="(item, index) in rectificationList" :key="index" @click="selectRectification(index)">
							<view :class="rectificationValue == index ? 'rectification-item-action' : 'rectification-item'">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<view v-if="rectificationValue == 1" class="info">
					<view class="row">
						<view class="zheng-gai-zi requireStar">整改日期:</view>
						<view class="con select-right" @click="open">
							<span v-if="!showDate">请选择整改日期</span>
							<span v-else>{{ datePickerValue }}</span>
						</view>
					</view>
					<view class="">
						<view style="display: flex; flex-direction: column">
							<view class="zheng-gai-zi requireStar">整改意见:</view>
							<view class="zi-bottom">{{ rectificationOpinion}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查负责人 -->
			<view class="item" v-if="rectificationValue == 1">
				<view class="top-label">
					<view class="requireStarBottom">检查负责人</view>
					<view style="display: flex">
						<view>请选择</view>
						<uv-icon name="arrow-right" size="20rpx" color="#000000"></uv-icon>
					</view>
				</view>
			</view>
			<!-- 检查人签名 -->
			<view class="item" style="margin-bottom: 200rpx">
				<view class="top-label">
					<view class="requireStarBottom">检查人签名</view>
					<view>签名</view>
				</view>
			</view>
		</view>
		<view class="check-bottom-box" @click.stop>
			<button class="sure-button" @click.stop="submit()">确认</button>
		</view>
		<speech-recognition ref="refSpeech" @getSpeeckInfo="getSpeeckInfo"></speech-recognition>
		<!-- 日期选择 -->
		<uv-datetime-picker ref="datetimePicker" v-model="value1" mode="date" :formatter="formatter" @confirm="confirm"></uv-datetime-picker>
		<!-- 上传图片弹层 -->
		<uv-popup ref="popup" @change="change" :closeable="true">
			<view class="popup-title-1">上传方式</view>
			<view class="up-popup-content">
				<view class="select-one" @click="chooseImage">从相册选择</view>
				<view class="select-two" @click="chooseImageCamera">照片上传</view>
				<view class="bottom-box" @click.stop>
					<view @click.stop="popupSubmit()">取消</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import speechRecognition from '@/packageDailyCheck/components/speechRecognition.vue';
import schoolInformation from './schoolInformation.vue';
import foodInformation from './foodInformation.vue';
import employedInformation from './employedInformation.vue';
import canteenInformation from './canteenInformation.vue';
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import config from "@/common/config";
let imgMinioPath = ref(config.IMG_MINIO_PATH);

// 选中检查人后选择返回的数据
const selsetValue = ref([]);
const list = ref([]);
onLoad((option) => {
	if (option.data) {
		let obj = JSON.parse(decodeURIComponent(option.data));
		selsetValue.value = obj.checkboxValue;
		if (selsetValue.value) {
			list.value = obj.checkboxValue.slice(0, 3);
		}
		showBasicInformation[1].show = true;
	}
});
// 整改意见
const rectificationOpinion =ref('整改意见')
const showBasicInformation = reactive([{ show: false }, { show: false }, { show: true }, { show: true }, { show: true }]);
const value = ref('');
const valueContent = ref('');
// 收起放开
function retract(index) {
	showBasicInformation[index].show = !showBasicInformation[index].show;
}
// 检查照片
const fileListCheck = ref([]);
// 检查记录单照片
const fileList = ref([{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }, { url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }]);
const imgList = ref([]);
const rectificationList = ref([
	{ name: '否', value: 0 },
	{ name: '是', value: 1 }
]);
const rectificationValue = ref(0);
// 检查内容列表
const checkList = [{ name: '燃气燃油' }, { name: '燃气燃油' }, { name: '燃气燃油' }];
const value1 = ref(Number(new Date()));
let datetimePicker = ref();
const isActive = ref(-1);
function annotationShow(index) {
	if (isActive.value === index) {
		isActive.value = -1;
	} else {
		isActive.value = index;
	}
}
function selectRectification(index) {
	rectificationValue.value = index;
}
// 打开选择日期组件
function open() {
	datetimePicker.value.open();
}
// 时间戳格式化
const timestampToTime = function (timestamp) {
	let timeStamp;
	let timeStampLen = timestamp.toString().length;
	if (timeStampLen === 10) {
		timeStamp = timestamp * 1000;
	} else if (timeStampLen === 13) {
		timeStamp = timestamp;
	} else {
		timeStamp = timestamp;
	}
	let date = new Date(timeStamp);
	let Y = date.getFullYear() + '-';
	let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
	let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
	return Y + M + D;
};
const showDate = ref(false);
const datePickerValue = ref('');
// 选择日期
function confirm(e) {
	datePickerValue.value = timestampToTime(e.value);
	showDate.value = true;
}
// 日期格式化
function formatter(type, value) {
	if (type === 'year') {
		return `${value}年`;
	}
	if (type === 'month') {
		return `${value}月`;
	}
	if (type === 'day') {
		return `${value}日`;
	}
	return value;
}
// 选择检查人
const toSelectExaminer = (e) => {
	let data = {
		checkboxValue: selsetValue.value ? selsetValue.value : ''
	};
	uni.navigateTo({
		url: '/packageDailyCheck/pages/startCheck/selsectExaminer?data=' + encodeURIComponent(JSON.stringify(data))
	});
};
// 图片预览
let onPreviewImage = (item, index) => {
	let photoList = fileList.value.map((item) => {
		return item.url;
	});
	uni.previewImage({
		// 先filter找出为图片的item，再返回filter结果中的图片url
		urls: photoList,
		current: index
	});
};
//语音输入
const refSpeech = ref();
const showSpeech = () => {
	refSpeech.value.open();
};

function getSpeeckInfo(val) {
	value.value += val;
}
// 返回
const back = () => {
	uni.redirectTo({
		url: '/packageDailyCheck/pages/createCheck/index'
	});
};
let popup = ref();
//显示弹层
function up() {
	popup.value.open('bottom');
}
// 关闭弹层
function popupSubmit() {
	popup.value.close();
}
// 相册选择图片上传
function chooseImage() {
	uni.chooseImage({
		count: 3, // 图片数量
		sizeType: ['original', 'compressed'],
		sourceType: ['album'], //上传方式
		success: (res) => {
			fileList.value.push(res.tempFilePaths);
		},
		fail: (err) => {
			console.log('选择图片失败', err);
		}
	});
}
// 拍照上传
function chooseImageCamera() {
	uni.chooseImage({
		count: 3,
		sizeType: ['original', 'compressed'],
		sourceType: ['camera'], //上传方式
		success: (res) => {
			fileList.value.push(res.tempFilePaths);
		},
		fail: (err) => {
			console.log('选择图片失败', err);
		}
	});
}
// 删除图片
function delect(){

}
// 开始检查确认按钮
function submit(){
	if (!fileListCheck.value || fileListCheck.value.length < 3) {
		uni.showToast({
			icon: 'none',
			title: '请至少上传3张检查照片'
		});
	}else if(rectificationValue.value == 1 && datePickerValue.value == ''){
		uni.showToast({
			icon: 'none',
			title: '请选择整改截至日期'
		});

	}else{
		uni.showToast({
			icon: 'success',
			duration: 2000,
			title: '操作成功'
		});
		uni.navigateTo({
			url: '/packageDailyCheck/pages/index'
		});
	}
}
</script>

<style lang="scss" scoped>
@import '@/static/css/dailycheck/viewIndex.scss';
@import '@/static/css/dailycheck/common.scss';

::v-deep .speech-main {
	.content {
		.uv-textarea__field {
			text-align: left !important;
			height: 400px !important;
		}
		.uv-border {
			border: 0 !important;
		}
	}
}
.row-check {
	display: flex;
	justify-content: space-between;
}
.textAreaBox {
	position: relative;
}
.fontCount {
	position: absolute;
	bottom: 2px;
	right: 130rpx;
	color: #9e9e9e;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	image {
		height: 50rpx;
		width: 50rpx;
	}
}

.list-container {
	margin-top: 20rpx;
}
::v-deep .placeholder-color {
	color: rgba(0, 0, 0, 0.3);
	font-size: 32rpx;
}
::v-deep .requireStar {
	width: 30%;
}
::v-deep .requireStar:after {
	vertical-align: bottom; //加上星号会上下居中，不加会在上角展示
	content: ' *';
	color: rgba(255, 59, 48, 1);
	font-size: 100%;
}
::v-deep .requireStarBottom {
	width: 30%;
	position: relative;
}
::v-deep .requireStarBottom:after {
	position: absolute;
	right: 0;
	vertical-align: bottom; //加上星号会上下居中，不加会在上角展示
	content: ' *';
	color: rgba(255, 59, 48, 1);
	font-size: 100%;
}
::v-deep.uv-textarea__field {
	text-align: left !important;
}
.rectification {
	display: flex;
	grid-gap: 20rpx;
	.rectification-item-action {
		width: 82rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: rgba(51, 117, 246, 0.698);
		border-radius: 2px;
		font-size: 24rpx;
	}
	.rectification-item {
		background: #cccccc;
		@extend .rectification-item-action;
	}
}
.select-right {
	text-decoration: underline;
	font-size: 32rpx;
	color: #3375f6 !important;
}
.zi-bottom {
	color: #676767;
	margin-top: 20rpx;
}
.popup-title-1 {
	height: 112rpx;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #e7e7e7;
	line-height: 112rpx;
	background: #ffffff;
}
.up-popup-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 360rpx;
	background: #f5f5f5;
	.select-one {
		height: 110rpx;
		background: #ffffff;
		margin-top: -140rpx;
		text-align: center;
		border-bottom: 1px solid #e7e7e7;
		line-height: 110rpx;
	}
	.select-two {
		height: 110rpx;
		line-height: 110rpx;
		background: #ffffff;
		text-align: center;
		border-bottom: 1px solid #e7e7e7;
	}
	.bottom-box {
		height: 110rpx;
		line-height: 110rpx;
		background: #ffffff;
		text-align: center;
	}
}
.check-all {
	display: flex;
	width: 110%;
	align-items: center;
}
.check-all-ri-label {
	color: #9e9e9e;
	font-size: 24rpx;
	width: 69%;
}
.zi-label {
	color: #9e9e9e;
	font-size: 24rpx;
}
.file-img {
	width: 140rpx;
	height: 140rpx;
	border-radius: 4px;
	margin-left: 10rpx;
}
.file-all {
	display: flex;
	flex-wrap: wrap;
	grid-gap: 10rpx;
}
.delet-img{
	height: 32rpx;
	width: 32rpx;
	position: absolute;
	right: 0;
	top: 0;
}
</style>
